import customerService, {
	type CustomerServiceInfo,
} from "@/api/services/customerService";
import { DynamicLoader } from "@/components/dynamic-loader";
import { ModalDrawer } from "@/components/modal-drawer";
import { NotificationButton } from "@/components/notification";
import NotificationList from "@/pages/notifications";
import { usePermissionRoutes } from "@/router/hooks";
import { useNavigation } from "@/utils/navigation";
import {
	BellOutlined,
	BookOutlined,
	CustomerServiceOutlined,
	DownloadOutlined,
	FileOutlined,
	FileImageOutlined,
	FilePdfOutlined,
	FileWordOutlined,
	VideoCameraOutlined,
	AudioOutlined,
	FolderOutlined,
	ProjectOutlined,
	RightOutlined,
	SearchOutlined,
	ClockCircleOutlined,
} from "@ant-design/icons";
import { useResponsive } from "ahooks";
import {
	Button,
	Card,
	Col,
	Input,
	List,
	Modal,
	Row,
	Space,
	Tag,
	Typography,
	Upload,
} from "antd";
import { useEffect, useState } from "react";
import { SubmitRecords } from "@/pages/submit-records";
import { commonService } from "@/api/services/commonService";
import NotificationCard from "@/components/Notification/NotificationCard";

import { zhCN } from "date-fns/locale";

const { Title } = Typography;

// 功能按钮组件
const ActionButtons = () => {
	const [modalState, setModalState] = useState<{
		component?: (() => JSX.Element) | null;
	}>({
		component: null,
	});

	const [notificationModalVisible, setNotificationModalVisible] =
		useState(false);
	const [customerServiceInfo, setCustomerServiceInfo] =
		useState<CustomerServiceInfo | null>(null);
	const [customerServiceVisible, setCustomerServiceVisible] = useState(false);

	const { mobile } = useResponsive();
	const { navigateTo } = useNavigation();
	const responsive = useResponsive();

	const handleNotificationClick = async () => {
		const result = await navigateTo("notifications", { modal: true });
		console.log("Projects result:", result.component);

		if (result?.component) {
			setModalState({ component: result.component });
		}
	};

	const handleCustomerServiceClick = async () => {
		try {
			const data = await customerService.getCustomerService();
			setCustomerServiceInfo(data);
			setCustomerServiceVisible(true);
		} catch (error) {
			console.error("获取客服信息失败:", error);
		}
	};

	const handleProjectsClick = async () => {
		const result = await navigateTo("Projects", { modal: true });
		console.log("Knowledge result:", result);
		if (result?.component) {
			setModalState({ component: result.component });
		}
	};

	const handleKnowledgeClick = async () => {
		const result = await navigateTo("Knowledge", { modal: true });
		console.log("Knowledge result:", result);
		if (result?.component) {
			setModalState({ component: result.component });
		}
	};

	const buttons = [
		{
			title: "项目列表",
			iconElement: <ProjectOutlined />,
			bgColor: "bg-blue-light",
			iconColor: "text-blue",
			onClick: handleProjectsClick,
		},
		{
			title: "知识库",
			iconElement: <BookOutlined />,
			bgColor: "bg-green-light",
			iconColor: "text-green",
			onClick: handleKnowledgeClick,
		},
		{
			title: "消息通知",
			iconElement: <BellOutlined />,
			bgColor: "bg-orange-light",
			iconColor: "text-orange",
			onClick: handleNotificationClick,
		},
		{
			title: "联系客服",
			iconElement: <CustomerServiceOutlined />,
			bgColor: "bg-purple-light",
			iconColor: "text-purple",
			onClick: handleCustomerServiceClick,
		},
	];

	return (
		<>
			<Row gutter={[responsive.mobile ? 12 : 16, responsive.mobile ? 12 : 16]}>
				{buttons.map((btn) => (
					<Col xs={12} sm={6} key={btn.title}>
						<div
							className={`${btn.bgColor} rounded-lg cursor-pointer transition-all hover:shadow-md`}
							onClick={btn.onClick}
						>
							<div className={`p-${responsive.mobile ? "3" : "4"} text-center`}>
								<div
									className={`${
										btn.iconColor
									} text-${responsive.mobile ? "2xl" : "3xl"} mb-2`}
								>
									{btn.iconElement}
								</div>
								<div className="text-gray-600 text-sm">{btn.title}</div>
							</div>
						</div>
					</Col>
				))}
			</Row>

			<Modal
				title="联系客服"
				open={customerServiceVisible}
				onCancel={() => setCustomerServiceVisible(false)}
				footer={null}
				width={mobile ? "90%" : 520}
			>
				{customerServiceInfo && (
					<div className="text-center">
						<div className="text-lg font-medium mb-2">
							{customerServiceInfo.name}
						</div>
						<div className="text-gray-600 whitespace-pre-wrap mb-4">
							{customerServiceInfo.content}
						</div>
						<div className="">
							<img
								src={customerServiceInfo.image}
								alt={customerServiceInfo.name}
								className="max-w-[200px] mx-auto rounded-lg"
							/>
						</div>
					</div>
				)}
			</Modal>
			{modalState.component && <modalState.component />}
		</>
	);
};
import { notificationService } from "@/api/services/notification";
import TaskPage from "@/pages/task";
// 通知栏组件
const NotificationBar = ({
	notification,
}: { notification: NotificationItem }) => {
	return (
		<NotificationCard
			title={notification.title}
			content={notification.content}
			createtime={notification.createtime}
		/>
	);
};

function Workbench() {
	const { mobile } = useResponsive();
	const [notification, setNotification] = useState(null);

	useEffect(() => {
		const fetchNotification = async () => {
			const response = await notificationService.notificationHome();
			setNotification(response);
		};

		fetchNotification();
	}, []);

	return (
		<div
			className={`${mobile ? "p-4" : "p-4"} bg-gray-50 min-h-screen space-y-4`}
		>
			<Row gutter={[mobile ? 12 : 24, mobile ? 12 : 24]}>
				<Col xs={24}>
					<ActionButtons />
				</Col>
				<Col xs={24}>
					{notification && <NotificationBar notification={notification} />}
				</Col>
				<Col xs={24}>
					<TaskPage />
				</Col>
			</Row>
		</div>
	);
}

export default Workbench;
